<template>
    <view class="pices">
        <!-- pages/goodsdetail/goodsdetail.wxml -->
        <swiper :indicator-dots="true" :autoplay="true" interval="2000" duration="500" indicator-color="rgba(0,0,0,0.5)" indicator-active-color="red" :circular="true">
            <block>
                <swiper-item v-for="(item, index) in goodpicture" :key="index">
                    <image :src="'http://1.14.101.56:82/'+item.product_picture" class="slide-image" style="width: 100%; height: 100%" mode="aspectFill" />
                </swiper-item>
            </block>
        </swiper>
        <view class="goods_content">
            <view class="content">
                <view class="goods_price">￥{{ good.product_selling_price }}</view>
                <view class="goods_title">{{ good.product_name }}</view>
            </view>
        </view>
        <!-- 中部 -->
        <view class="message">
            <view class="goods_message">
                <view>购买须知</view>
                <view class="right">
                    <image src="/static/images/my_order.png"></image>
                </view>
            </view>
            <view class="goods_message">
                <view>礼品包装</view>
                <view class="right">
                    <image src="/static/images/my_order.png"></image>
                </view>
            </view>
        </view>
        <!-- 底部导航 -->
        <view class="footer_nav">
            <view class="nav_list">
                <navigator url="/pages/index/index" open-type="switchTab">
                    <image src="/static/images/shop-a.png"></image>
                    <view class="nav_name">首页</view>
                </navigator>
            </view>
            <view class="nav_list" @tap="collectFun">
                <!-- <navigator url="/pages/collection/collection"> -->
                <image v-if="isCollect" src="/static/images/shouchang-b.png"></image>
                <image v-else src="/static/images/shouchang-a.png"></image>
                <view v-if="!isCollect" class="nav_name">收藏</view>
                <view v-else class="nav_name">已收藏</view>
                <!-- </navigator> -->
            </view>
            <view class="nav_list">
                <navigator url="/pages/cart/cart" open-type="switchTab">
                    <image src="/static/images/car-a.png"></image>
                    <view class="nav_name">购物车</view>
                </navigator>
            </view>
            <view class="add_cart goods_buy" @tap="addToCartFun">加入购物车</view>
            <view class="now_buy goods_buy" @tap="buyNow">立即购买</view>
        </view>
        <!-- 隐藏购物车 -->
        <!-- 屏幕背景变暗的背景 -->
        <view class="commodity_screen" @tap="hideModal" v-if="showModalStatus"></view>
        <!-- 弹出框 -->
        <view :animation="animationData" class="commodity_attr_box" v-if="showModalStatus">
            <view class="commImg">
                <image :src="'http://1.14.101.56:82/'+good.product_picture" mode="aspectFit"></image>
            </view>
            <view class="column">
                <text class="sku-price">￥{{ good.product_selling_price }}</text>
                <text class="sku-title">
                    <block v-if="gg_txt == ''">请选择包装</block>
                    <block v-else>已选择 {{ good.product_name }}，{{ num }}个</block>
                </text>
            </view>
            <text class="line"></text>
            <view class="guige">
                <text class="gg-title">包装</text>
<!--                <view class="gg"> -->
                    <view class="uni-px-5">
<!--                    				<view class="text">{{JSON.stringify(radio3)}}</view> -->
                    				<uni-data-checkbox mode="tag" v-model="radio3" :localdata="sex"></uni-data-checkbox>
                <!--    </view> -->
                </view>
            </view>
            <text class="line"></text>
            <view class="row">
                <text>数量</text>
                <view class="quantity-position">
                    <view class="stepper">
                        <!-- 减号 -->
                        <text :class="minusStatus" @tap="bindMinus">-</text>
                        <!-- 数值 -->
                        <input type="number" @blur="bindBlur" @input="bindManual" :value="num" />
                        <!-- 加号 -->
                        <text class="normal" @tap="bindPlus">+</text>
                    </view>
                </view>
            </view>
            <text class="line"></text>
            <view class="btn">
                <button v-if="isBuy" style="margin-right: 10px" @tap="bindBuyNow" class="button-buy">立即购买</button>
                <button v-else style="margin-right: 10px" class="button-add" @tap="addCart">确认</button>
            </view>
        </view>
    </view>
</template>

<script>
	import{mapMutations}from 'vuex'
// pages/goodsdetail/goodsdetail.js
// const db = wx.cloud.database();
let id = '';
export default {
    data() {
        return {
			productId: 0,
            good: [],
            showModalStatus: false,
			goodpicture:[],
            isBuy: true,
            isCollect: false,
            num: 1,
            minusStatus: 'disabled',
            real_name: '',
            phone_number: 0,
            address: '',
            animationData: '',
            gg_txt: '',
			radio3: 0,
            gg_id: '',
            guigeList: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(opt) {
		let userid=uni.getStorageSync("userid");
		
        // this.getAddressFun();
        var id = this.productId = opt.id;
		console.log(this.productId);
		let that=this
		uni.request({
			url:"/api/product/getDetails",
			method:"POST",
			data:{
				productID:id
			},
			success(res) {
				console.log(res.data.Product[0]);
				that.good = res.data.Product[0]
			},
			fail:(e)=> {
			    console.log('查询失败',e);
			}
		})
		uni.request({
			url:"/api/product/getDetailsPicture",
			method:"POST",
			data:{
				productID:id
			},
			success(res) {
				that.goodpicture=res.data.ProductPicture
				console.log(res.data.ProductPicture);
			},
			fail:(e)=> {
			    console.log('查询失败',e);
			}
		})
		uni.request({
			url:"/api/user/collect/getCollect",
			method:"POST",
			data:{
				user_id:userid,
			},
			success: (res) => {
				uni.request({
					url:"/api/user/collect/getCollect",
					method:"POST",
					data:{
						user_id:userid,
					},
					success: (res) => {
				     that.collect=res.data.collectList
					 let productid=res.data.collectList[0].product_id;
					
								if(productid!=id){
									this.isCollect=false
								}else{
									this.isCollect=true
								}	
		              uni.setStorageSync("productid",id)
								
								
					}
				})
				
				}
				
			
		})
            // .then((res) => {
            //     console.log(res);

            //     if (res.data.selected) {
            //         this.isCollect = true;
            //     } else {
            //         this.isCollect = false;
            //     }

            //     console.log('礼品详情页成功', res);
            //     this.setData({
            //         good: res.data,
            //         isCollect: this.isCollect
            //     });
            // })
            // .catch((res) => {
            //     console.log('礼品详情页失败', res);
            // });
    },
    methods: {
		...mapMutations('m_cart',['addCart']),
        bindBlur: function (e) {
            if (this.num < 1) {
                uni.showToast({
                    title: '该宝贝不能再减少了哦~',
                    icon: 'none',
                    duration: 2000
                });
                this.setData({
                    num: 1
                });
            } else {
                // console.log(this.data.num)
            }
        },

        bindMinus: function (e) {
            //减少数量
            var num = this.num; // 如果大于1时，才可以减

            if (num > 1) {
                num--;
            } // 只有大于一件的时候，才能normal状态，否则disable状态

            var minusStatus = num <= 1 ? 'disabled' : 'normal'; // 将数值与状态写回

            this.setData({
                num: num,
                minusStatus: minusStatus
            });
        },

        bindPlus: function (e) {
            //增加数量
            var num = this.num; // 不作过多考虑自增1

            num++; // 只有大于一件的时候，才能normal状态，否则disable状态

            var minusStatus = num < 1 ? 'disabled' : 'normal'; // 将数值与状态写回

            this.setData({
                num: num,
                minusStatus: minusStatus
            });
        },

        addToCartFun: function (e) {
			this.setData({
			    showModalStatus: true,
			    isBuy: false
			});
           
        },

        buyNow: function (e) {
            this.setData({
                showModalStatus: true,
                isBuy: true
            });
        },

        hideModal: function () {
            this.setData({
                showModalStatus: false
            });
        },

        addCart: function (e) {
			
			let userid=uni.getStorageSync("userid");
            //添加到购物车
            uni.request({
				url:"/api/user/shoppingCart/addShoppingCart",
				method:"POST",
				data:{user_id:userid,
				product_id:this.productId},
			   success: (res) => {
                        if (res.data.code = "002") {
                            console.log('添加成功',res);
							this.setData({
							            num: 1
							        });
							 this.successAddToCart();
                           
                        } else {
                         uni.request({
                         	url:"/api/user/shoppingCart/updateShoppingCart",
							method:"POST",
							data:{
								user_id:userid,
								product_id:id,
								num:this.num
							},
							success: (res) => {
								console.log(res);
							            this.successAddToCart();
							        },
							        fail: (res) => {
							            console.log(res);
							        }
                         })
                        }

                        // uni.reLaunch({
                        //     url: '../cart/cart'
                        // });
                    },
                    fail: (res) => {
						console.log("添加失败");
					}
                });
        },

        successAddToCart: function (e) {
            uni.showToast({
                title: '加入购物车成功',
                icon: 'success',
                duration: 2000
            });
            this.setData({
                showModalStatus: false
            });
        },

        collectFun: function (e) {
			 let productid=uni.getStorageSync("productid")
			let userid=uni.getStorageSync("userid");
            //收藏
            if (!this.isCollect) {
                this.setData({
                    isCollect: true
                });   
                uni.request({
					url:"/api/user/collect/addCollect",
					method:"POST",
                    data: {
                        user_id : userid,
						product_id:productid
                    },
                    success(res) {
                        // console.log("添加成功", res)
                        uni.showToast({
                            title: '收藏成功',
                            icon: 'success',
                            duration: 2000
                        });
                    },

                    fail(res) {
                        console.log('添加失败', res);
                    }
                });
            } else {
                this.setData({
                    isCollect: false
                });
					uni.request({
						url:"/api/user/collect/deleteCollect",
						method:"POST",
						data:{user_id:userid,
							 product_id:productid,
								},
                        success(res) {
                            // console.log("删除成功",res)
                            uni.showToast({
                                title: '取消收藏',
                                icon: 'none',
                                duration: 2000
                            });
                        },

                        fail(res) {
                            console.log('删除失败', res);
                        }
                    });
                
            }
        },
		bindBuyNow(){
			uni.navigateTo({
				url:'/pages/orderPay/orderPay'
			})
		},

        getAddressFun: function (e) {
           let userid=uni.getStorageSync("userid");
            uni.request({
				url:"/api/user/address/getAddress",
				method:"POST",
				data:{
					user_id:userid
				},
			success: (res) => {
			    this.setData({
			        real_name: res.data[0].real_name,
			        phone_number: res.data[0].phone_number,
			        address: res.data[0].province+res.data[0].city+res.data[0].district+res.data[0].full_address
			    });
			}
            });
            
        },

    }
};
</script>
<style>
page {
    background-color: #f3f3f3;
	height: 100%;
}
.pices{
	height: 100%;
}
swiper {
    display: block;
    height: 562rpx;
    /* margin-top: 140rpx; */
}
.goods_content {
    display: flex;
    justify-content: space-between;
    background: white;
    padding: 30rpx 30rpx 0 30rpx;
}
.content {
    width: 79%;
    line-height: 1.6;
}
.goods_title {
    font-size: 34rpx;
}
.goods_price {
    font-size: 40rpx;
    color: #c13431;
    /*font-weight: bold;*/
}
.message {
    background: white;
    padding: 0 20rpx;
    margin-top: 20rpx;
}
.goods_message {
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2rpx solid #f3f3f3;
}
.message .goods_message .right image {
    width: 25rpx;
    height: 40rpx;
    right: 0px;
}
/*底部导航*/
.footer_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    height: 96rpx;
    background: white;
    border-top: 2rpx solid #f3f3f3;
}
.nav_list {
    width: 14%;
    text-align: center;
    height: 90rpx;
    line-height: 1.4;
    margin-top: 4rpx;
}
.nav_list image {
    width: 45rpx;
    height: 45rpx;
}
.nav_name {
    font-size: 24rpx;
    color: #7d7d7d;
}
.goods_buy {
    width: 29%;
    text-align: center;
    height: 96rpx;
    line-height: 96rpx;
    color: white;
    font-size: 30rpx;
}
.add_cart {
    background: #eded3b;
}
.now_buy {
    background: #e72128;
}
/*使屏幕变暗  */
.commodity_screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 1000;
    color: #fff;
}
/*对话框 */
.commodity_attr_box {
    width: 94%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: #fff;
    padding: 20rpx 3%;
}

.commImg {
    position: absolute;
    width: 150rpx;
    height: 150rpx;
    background: #fff;
    border: 1px solid #f5f5f5;
    z-index: 12;
    left: 20px;
    top: -35px;
    padding: 20rpx;
    border-radius: 20rpx;
}
.commImg image {
    width: 100%;
    height: 100%;
}

.column {
    display: flex;
    flex-direction: column;
}

.sku-price {
    color: red;
    position: relative;
    left: 250rpx;
    margin: 1rpx;
}
.sku-title {
    position: relative;
    left: 250rpx;
    font-size: 12px;
    margin: 1rpx;
}

.line {
    width: 95%;
    height: 2rpx;
    display: inline-block;
    margin: 30rpx 0rpx 5rpx 0rpx;
    background-color: #f2f2f2;
    text-align: center;
}

.gg-title {
    font-size: 15px;
}

.gg text {
    width: 100rpx;
    height: 50rpx;
    line-height: 50rpx;
    float: left;
    background: #f2f2f2;
    text-align: center;
    margin: 20rpx 0 0 26rpx;
    font-size: 12px;
    border-radius: 5px;
}
.gg .active {
    color: #fff;
    background: #e64340;
}
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.row .quantity-position {
    position: absolute;
    margin-top: 5px;
    right: 50rpx;
}

.btn {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.button-add {
    width: 50%;
    border: 0px;
    background: #e72128;
    color: #fff;
    border-radius: 0px;
}
.button-buy {
    width: 50%;
    background: #e72128;
    color: #fff;
    border-radius: 0px;
}

/*数量加减样式*/
/*主容器*/
.stepper {
    width: 80px;
    height: 26px;
    /*给主容器设一个边框*/
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0 auto;
}

/*加号和减号*/
.stepper text {
    width: 19px;
    line-height: 26px;
    text-align: center;
    float: left;
}

/*数值*/
.stepper input {
    padding: 0px;
    width: 40px;
    height: 26px;
    float: left;
    margin: 0 auto;
    text-align: center;
    font-size: 12px;
    /*给中间的input设置左右边框即可*/
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

/*普通样式*/
.stepper .normal {
    color: black;
}
.stepper .disabled {
    color: #ccc;
}
.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}
	.uni-px-5 {
	    padding-left: 10px;
	    padding-right: 10px;
		
	}
	.uni-pb-5 {
	    padding-bottom: 10px;
	}
</style>
